<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-11-09 09:30:45
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
view.map-container
  view.map(id="map", :style="{height: mapHeight + 'px'}")
</template>

<script setup>
import { ref, onMounted } from "vue"; // vue相关方法
import { Map, View, Feature } from "ol"; // 地图实例方法、视图方法
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import OSM from "ol/source/OSM"; // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import Vector from "ol/layer/Vector"; // 瓦片渲染方法
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import "ol/ol.css"; // 地图样式
import LocationCurrent from "@/static/images/location-current.png";
import LocationMerchant from "@/static/images/location-merchant.png";
import { fromLonLat } from "ol/proj";
import { Style, Icon } from "ol/style";
import { defaults as defaultControls } from "ol/control";
// import XYZ from "ol/source/XYZ"; // XYZ

const props = defineProps({
  mapHeight: {
    type: String,
    default: "400"
  },
  // location: {
  //   default: []
  // },
  // mapData: {
  //   default: []
  // }
});
const map = ref(null); // 存放地图实例
const location = [120.26952, 30.18656];
const point = new Point(location);
const pointLayer = ref(null);
const featuresArr = ref([]);
const mapData = ref([
  { x: 120.26952, y: 30.18656, type: "local" },
  { x: 120.24820, y: 30.19540, type: "other" },
  { x: 120.27354, y: 30.17695, type: "other" },
  { x: 120.28633, y: 30.19009, type: "other" },
  { x: 120.26973, y: 30.23711, type: "other" }
]);

// watch(
//   props.mapData,
//   (newValue, oldValue) => {
//     addPoints(props.mapData); // 根据商家列表定位坐标点批量打点
//   },
//   {
//     deep: true
//   }
// );

const initMap = () => {
  // 地图实例
  map.value = new Map({
    target: "map", // 对应页面里id为map的元素
    controls: defaultControls({
      zoom: true
    }).extend([]),
    layers: [
      // 图层
      new Tile({
        // 使用瓦片渲染方法
        source: new OSM() // 图层数据源
      })
    ],
    view: new View({
      // 地图视图
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: location.value, // 心意广场位置
      maxZoom: 19, // 地图缩放最大级别
      minZoom: 4, // 地图缩放最小级别
      zoom: 12 // 地图初始化缩放级别
    })
  });
};

onMounted(() => {
  initMap();
  addPoints(mapData.value); // 根据当前定位坐标点打点
});

// 批量根据经纬度坐标打点
const addPoints = (coordinates) => {
  // 设置图层
  pointLayer.value = new Vector({
    source: new VectorSource()
  });
  // 添加图层
  map.value.addLayer(pointLayer.value);
  // 使用循环添加feature
  for (let i = 0; i < coordinates.length; i++) {
    // 创建feature，一个feature就是一个点坐标信息
    let feature = new Feature({
      geometry: new Point([coordinates[i].x, coordinates[i].y])
    });
    feature.setStyle(getIcon(coordinates[i].type));
    featuresArr.value.push(feature);
  }
  // 批量添加feature
  pointLayer.value.getSource().addFeatures(featuresArr.value);
};
const getIcon = (type) => {
  let src = type == "local" ? LocationCurrent : LocationMerchant;
  var styleIcon = new Style({
    // 设置图片效果
    image: new Icon({
      src: src,
      anchor: [1, 1]
    })
  });
  return styleIcon;
};
</script>

<style lang="stylus" scoped>
// .map
//   height: 600px;
</style>
